import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '@/views/LoginView.vue'
import Layout from '@/views/Layout.vue'
import HomeView from '@/views/HomeView.vue'
import ProductListView from '@/views/ProductListView.vue'
import ProductAddView from '@/views/ProductPubView.vue'
import AdminManageView from '@/views/UserListView.vue'
import { ElMessage } from 'element-plus'
import { adminInfoRequest } from '@/api/user'
import { useUserStore } from '@/stores/user'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      //路由重定向
      redirect: '/home',
      children: [
        {
          path: '/home',
          name: 'home',
          component: HomeView,
          meta: {
            requiredLogin: true,
            // 前端控制页面权限 0-先在meta给每一个页面标记，允许访问的角色
            //角色1 和角色2 都能访问
            roles: [1, 2],
          },
        },
        // {
        //   path: '/prolist',
        //   name: 'prolist',
        //   component: ProductListView,
        //   meta: {
        //     requiredLogin: true,
        //     // 前端控制页面权限 0-先在meta给每一个页面标记，允许访问的角色
        //     //角色1 和角色2 都能访问

        //     roles: [1, 2],
        //   },
        // },
        // {
        //   path: '/proadd',
        //   name: 'proadd',
        //   component: ProductAddView,
        //   meta: {
        //     requiredLogin: true,
        //     // 前端控制页面权限 0-先在meta给每一个页面标记，允许访问的角色
        //     //角色1 都能访问
        //     roles: [1],
        //   },
        // },
        // {
        //   path: '/AdminManageView',
        //   name: 'AdminManageView',
        //   component: AdminManageView,
        //   meta: {
        //     requiredLogin: true,
        //     // 前端控制页面权限 0-先在meta给每一个页面标记，允许访问的角色
        //     //角色1 都能访问
        //     roles: [1],
        //   },
        // },
      ],
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      meta: {
        requiredLogin: false,
      },
    },
  ],
})

// 前端控制页面权限
// router.beforeEach(async (to, from) => {
//   //判断当前页面是否需要登录
//   if (to.meta.requiredLogin == true) {
//     //需要登录
//     // ---判断用户是否已经登录了
//     const token = localStorage.getItem('xx-mall-admin-token')
//     if (token) {
//       //用户已经登录了
//       // ----前端控制页面权限
//       //****  判断具体某一个页面的权限
//       //前端控制页面权限 0-先在meta给每一个页面标记，允许访问的角色
//       //前端控制页面权限 1-获取用户的角色消息
//       // ---什么时候获取（要保证，访问页面前要获取一次）
//       // ------ 路由前置守卫--获取用户的角色role
//       const userStore = useUserStore()

//       // 使用as断言，断言一定是字符串
//       //前端控制页面权限 1-获取用户的角色消息
//       const r = await adminInfoRequest(userStore.username as string)
//       //r.data.data.role角色信息
//       console.log('-------', r.data)

//       //把角色信息存入pinia
//       userStore.setRole(r.data.data.role)
//       // userStore.role //1 或者 2
//       // to.meta.roles //[1,2]  [1] [2]
//       //  roles数组中包含 role 说明有访问权限
//       // if ((to.meta.roles as number[]).includes(userStore.role as number)) {
//       // } else {
//       //   //不让跳转
//       //   //用户没有登录
//       //   ElMessage.error('没有访问权限')
//       //   return false
//       // }

//       // ---获取以后存哪里（本地，pinia）
//       //前端控制页面权限 2-和meta里面的角色roles，进行对比，就可以知道这个用户是否有这个页面的访问权限了
//     } else {
//       //用户没有登录
//       ElMessage.error('请登录')
//       // router.push('/login')
//       // return false
//       return { path: '/login' }
//     }
//   } else {
//     //不需要登录
//   }
// })

//读取views下面的所有vue文件对象
const modules = import.meta.glob('@/views/**/*.vue')
console.log('+++++++', modules)

// 后端控制页面权限
router.beforeEach(async (to, from) => {
  //判断当前页面是否需要登录
  if (to.meta.requiredLogin == true) {
    //需要登录
    // ---判断用户是否已经登录了
    const token = localStorage.getItem('xx-mall-admin-token')
    if (token) {
      //用户已经登录了
      // ----前端控制页面权限
      //****  判断具体某一个页面的权限
      //前端控制页面权限 0-先在meta给每一个页面标记，允许访问的角色
      //前端控制页面权限 1-获取用户的角色消息
      // ---什么时候获取（要保证，访问页面前要获取一次）
      // ------ 路由前置守卫--获取用户的角色role
      const userStore = useUserStore()

      // 使用as断言，断言一定是字符串
      //前端控制页面权限 1-获取用户的角色消息
      const r = await adminInfoRequest(userStore.username as string)
      //r.data.data.role角色信息
      console.log('-------', r.data)

      console.log('------- permissionList', r.data.data.permissionList)
      // 后端，返回可以访问的 路由的信息--前端动态注册了

      //把角色信息存入pinia
      userStore.setRole(r.data.data.role)
      //把权限列表存入pinia
      userStore.setPermissionList(r.data.data.permissionList)
      userStore.setMenuList(r.data.data.menuList)
      userStore.setPermissionBtnList(r.data.data.permissionBtnList)

      // ----后端端控制页面权限
      // permissionList(权限列表) 后端返回的用户可以访问的路由信息
      // 前端动态注册到路由中
      // router.addRoute,这个方法添加是一级路由
      // 要加二级路由--就会把route对象添加到一级路由的children里面
      // router.addRoute('一级路由的名字',route对象)
      //
      dyRoutesHandler(userStore.permissionList)
      userStore.permissionList.forEach((route) => {
        router.addRoute('Layout', route)
      })
    } else {
      //用户没有登录
      ElMessage.error('请登录')
      // router.push('/login')
      // return false
      return { path: '/login' }
    }
  } else {
    //不需要登录
  }
})

// function

function dyRoutesHandler(arr) {
  arr.forEach((route) => {
    route.component //HomeView 字符串--转为一个vue组件对象

    // 把组件名字符串转为了一个 组件的具体路径
    const path = '/src/views/' + route.component + '.vue'

    const componentObj = modules[path]
    console.log(path)

    //获取组件的文件的对象的懒加载函数
    console.log('$$$$$$', componentObj)
    route.component = componentObj
    if (route.children) {
      //如果children存在传入 函数自己，递归调用
      dyRoutesHandler(route.children)
    }
  })
}

export default router
